<template>
    <div class="loopPlay">
        <div class="page-name">
            <span>场景页名称：</span>
            <el-input class="name" type="text" placeholder="智汇轮播"></el-input>
            <el-button type="text">修改</el-button>
        </div>
        <div>
            <div class="base">
                <div class="title">
                    场景功能：<span style="font-size: 24px">智汇轮播</span>
                </div>
                <div class="bgImg">
                    <div>
                        <span>大屏背景图片：</span>
                        <span class="infoBox">{{bgImage.url?bgImage.title:'请选择背景图片'}}</span>
                        <i class="iconfont ss-wenhao"></i>
                        <el-button type="text" @click="picLibraryVisibly = 'bgImg'">图片库</el-button>
                        <el-button type="text" class="text_danger_btn" @click="bgImage={}">删除</el-button>
                    </div>
                </div>
                <div class="effect">
                    <span>大屏特效：</span>
                    <span class="infoBox">{{effects.name?effects.name:'请选择特效'}}</span>
                    <i class="iconfont ss-wenhao"></i>
                    <el-button type="text" @click="sfxLibraryVisibly = true">特效库</el-button>
                    <el-button type="text" class="text_danger_btn">删除</el-button>
                </div>
                <div class="addBtn">
                    <el-button type="primary" icon="el-icon-plus" @click="lbAdd">添加轮播</el-button>
                </div>
                <div class="list">
                    <div class="item" v-for="(item,index) in playList" :name="item" :key="item.title+index">
                        <div class="item-ctrl">
                            <span>{{item.title+(index+1)}}</span>
                            <span>
                                <el-button type="text" class="text_danger_btn">删除</el-button>
                                <el-button @click="hideInfo(index)" type="text">收起
                                    <i style="transition: all 0.5s" class="el-icon-arrow-down"
                                       :style="index===active?{transform:'rotate(180deg)'}:{transform:'rotate(0deg)'}"></i>
                                </el-button>
                            </span>
                        </div>
                        <div class="item-info" :style="index===active?{maxHeight:'3000px'}:{maxHeight:'0px'}">
                            <div class="play">
                                <el-switch v-model="item.playMode" inactive-color="#1994fa" active-color="#ccc"
                                           active-text=""
                                           active-value="2" inactive-value="1"
                                           inactive-text="自动播放">
                                </el-switch>
                                <span>停留时间：
                                    <el-input v-model="item.delayTime"
                                              style="width: 80px;margin-right: 5px;"></el-input>秒
                                </span>
                                <span>轮播动画：
                                    <span class="infoBox">已选择{{4}}种</span>
                                    <span @click="lbModal=true">选择</span>
                                </span>
                                <span class="infoBox2">位置：
                                    <img @click="showLoopPositionModal(index,item.positionInfo)"
                                         :src="item.positionInfo.src" alt="">
                                    <i class="iconfont ss-wenhao"></i>
                                </span>
                            </div>
                            <div class="img">
                                <div>
                                    <span>图片平铺：</span>
                                    <el-radio-group v-model="item.imgSize">
                                        <el-radio label="keep">保持比例</el-radio>
                                        <el-radio label="full">强制全屏</el-radio>
                                        <el-radio label="stretch">保持比例拉伸</el-radio>
                                    </el-radio-group>
                                </div>
                                <div>
                                    <a style="color: #1989FA">帮助及示例</a>
                                </div>
                            </div>
                            <div>
                                <el-button style="width: 100px;border-radius: 20px" type="primary"
                                           @click="picLibraryVisibly='lbImg_'+index">添加图片
                                </el-button>
                            </div>
                            <div class="imgList">
                                <div class="imgBox" v-for="img in item.imgList" :key="img.src">
                                    <div class="img">
                                        <img :src="img.url" alt="">
                                    </div>
                                    <div class="textarea">
                                        <el-input v-model="img.title" style="width: 100%;"
                                                  type="textarea"></el-input>
                                    </div>
                                    <div style="text-align: right">
                                        <el-button type="danger">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <footerButtons @save="" editButton="true"></footerButtons>

        <el-dialog custom-class="definedModal" width="690px" title="轮播动画" :visible="lbModal" @close="lbModal=false">
            <div class="animations">
                <el-radio-group class="type" v-model="animationInfo.type" @change="animationTypeChange">
                    <el-radio label="2D">2D轮播</el-radio>
                    <el-radio label="3D">3D轮播</el-radio>
                    <el-radio disabled label="3D-1">3D动感</el-radio>
                    <el-radio disabled label="3D-2">3D裂变</el-radio>
                </el-radio-group>
                <div class="btn">
                    <el-button @click="">全选</el-button>
                    <el-button @click="">反选</el-button>
                </div>
                <el-checkbox-group class="group" v-model="animationInfo.img_effects">
                    <div v-if="animationInfo.type==='2D'">
                        <el-checkbox v-for="ani in allEffects.twoDArr" :label="ani.effect" :title="ani.name">
                            <div class="imgBox">
                                <img src="../../../../assets/imgs/db.png" alt="">
                                <div>{{ani.name}}</div>
                            </div>
                        </el-checkbox>
                    </div>
                    <div v-if="animationInfo.type==='3D'">
                        <el-checkbox v-for="ani in allEffects.threeDArr" :label="ani.effect">
                            <div class="imgBox">
                                <img src="../../../../assets/imgs/db.png" alt="">
                                <div>{{ani.name}}</div>
                            </div>
                        </el-checkbox>
                    </div>
                </el-checkbox-group>
                <div class="bottom">
                    <el-button @click="">取消</el-button>
                    <el-button @click="">确认</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog :visible="!!picLibraryVisibly" width="800px" title="图片库" @close="picLibraryVisibly = false"
                   append-to-body custom-class="library_dialog definedModal">
            <imagesLibrary @selected="selectCurrentImg" @close="picLibraryVisibly = false"></imagesLibrary>
        </el-dialog>
        <el-dialog :visible="!!sfxLibraryVisibly" width="660px" title="特效库" @close="sfxLibraryVisibly = false"
                   append-to-body custom-class="definedModal">
            <specialLibrary @selected="selectCurrentsfx" @close="sfxLibraryVisibly = false"></specialLibrary>
        </el-dialog>
        <el-dialog :visible="!!loopPositionModal" width="600px" title="轮播位置" @close="closeLoopPositionModal"
                   append-to-body custom-class="definedModal">
            <bulletScreenAreaPos ref="position" :areaPos="currentInfo.value"></bulletScreenAreaPos>
        </el-dialog>
    </div>
</template>

<script>
    import { configMerge } from '../../../../utils/pageConfig';
    import imagesLibrary from '../baseSetting/library/imagesLibrary';
    import specialLibrary from '../baseSetting/library/specialLibrary';
    import bulletScreenAreaPos from '../viewPart/bulletScreenAreaPos';
    import { deepCopy } from '../../../../utils/util';
    import { lbConfig, threeDArr, twoDArr } from '../../../../utils/sliderConfig';

    export default {
        name: 'loopPlay',
        components: {
            imagesLibrary,
            specialLibrary,
            bulletScreenAreaPos,
        },
        data() {
            return {
                pageName: '',
                pageId: '',
                bgImage: {},
                effects: {},
                currentInfo: {
                    index: 0,
                    id: 0,
                    value: 'm',
                    text: '中间',
                    src: require('@/assets/imgs/img_btsArea_m.svg'),
                },
                playList: [
                    {
                        title: '轮播', playMode: '', delayTime: 3, loopAnimation: {},
                        positionInfo: {
                            id: 0,
                            value: 'm',
                            text: '中间',
                            src: require('@/assets/imgs/img_btsArea_m.svg'),
                        },
                        imgSize: 'keep', imgList: [],
                    },
                ],
                active: -1,
                lbModal: true,
                picLibraryVisibly: false,
                sfxLibraryVisibly: false,
                loopPositionModal: false,
                allEffects: {
                    threeDArr, twoDArr,
                },
                animationInfo: {
                    type: '2D',
                    img_effects: [],
                },
            };
        },
        mounted() {
            if (this.$route.path.indexOf('add') > -1) {
                this.pageName = this.$route.name;
            } else {
                this.$api.post();
            }
        },
        methods: {
            hideInfo(index) {
                if (this.active === index) {
                    this.active = -1;
                } else {
                    this.active = index;
                }
            },
            selectCurrentImg(imgInfo) {
                console.log('xxxx', this.picLibraryVisibly, imgInfo);
                let tag = this.picLibraryVisibly;
                if (tag.indexOf('bgImg') > -1) {
                    this.bgImage = imgInfo;
                } else if (tag.indexOf('lbImg') > -1) {
                    let index = tag.split('_')[1];
                    this.playList[index].imgList.push(imgInfo);
                }
                this.playList = this.playList.slice();
            },
            selectCurrentsfx(data) {
                console.log('selectCurrentsfx', data);
                this.effects = data;
            },
            showLoopPositionModal(index, info) {
                this.loopPositionModal = true;
                this.currentInfo = info;
                this.currentInfo.index = index;
            },
            closeLoopPositionModal() {
                this.loopPositionModal = false;
                this.$refs.position.btsAreaPos.forEach(item => {
                    if (item.value === this.$refs.position.area) {
                        this.playList[this.currentInfo.index].positionInfo = item;
                    }
                });
                this.playList = this.playList.slice();
            },
            lbAdd() {
                this.playList.push(deepCopy(lbConfig));
            },
            animationTypeChange() {
                console.log(this.animationInfo);
            },
        },
    };
</script>

<style scoped lang="scss">
    .page-name {
        text-align: right;
        margin: 20px;
        padding-right: 20px;
        .name {
            width: 180px;
        }
    }

    .base {
        margin: 20px;
        padding: 20px;
        border-radius: $radius-main;
        background: #FFFFFF;
        & > div {
            margin: 30px 0;
            padding: 0 20px;
        }
        .title {
            margin-top: 0;
        }
        .bgImg {
            @include flex;
        }
        .effect {
            @include flex;
        }
        .addBtn {
            & > button {
                border-radius: 20px;
                width: 150px;
            }
        }
        .list {
            .item {
                &:last-child {
                    border-bottom: 1px solid #cccccc;
                }
                border-top: 1px solid #cccccc;
                .item-ctrl {
                    padding: 10px;
                    @include flex-bt;
                    & > span:first-of-type {
                        font-size: 16px;
                        font-weight: bold;
                        color: #333333;
                    }
                    & > span:last-of-type {

                    }
                }
                .item-info {
                    overflow: hidden;
                    transition: all 0.5s;
                    max-height: 1px;
                    & > div {
                        @include flex;
                        flex-wrap: wrap;
                        margin: 20px 0;
                    }
                    .play {
                        @include flex-bt;
                        flex-wrap: nowrap;
                        & > * {
                            margin-right: 20px;
                        }
                    }
                    .img {
                        @include flex-bt;
                    }
                    .imgList {
                        padding-bottom: 10px;
                        .imgBox {
                            margin: 10px;
                            width: 270px;
                            height: 290px;
                            border-radius: 5px;
                            overflow: hidden;
                            padding: 10px;
                            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
                            & > * {
                                margin: 20px 0;
                                width: 100%;
                            }
                            .img {
                                height: 100px;
                                overflow: hidden;
                                img {
                                    height: 100%;
                                    margin: 0 auto;
                                }
                            }
                            .textarea {
                                /deep/ textarea {
                                    height: 65px;
                                    resize: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .loopPlay {
        height: 100%;
        padding-bottom: 70px;
        position: relative;
    }

    .footer {
        text-align: right;
        button {
            border-radius: 20px;
            width: 100px;
            border-width: 2px;
        }
        button:first-of-type {
            width: 150px;
            border-color: $color-blue;
        }
    }

    .ss-wenhao {
        color: #cccccc;
    }

    .infoBox {
        width: 150px;
        border: 1px solid #cccccc;
        padding: 5px;
        text-align: center;
        border-radius: 5px;
        margin-right: 10px;
        color: #909398;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        vertical-align: middle;
    }

    .infoBox2 {
        @include flex-bt;
        width: 190px;
        cursor: pointer;
    }

    .animations {
        .type {
            margin: 20px;
        }
        .btn {
            text-align: left;
            margin: 20px;
        }
        .group {
            /deep/ .el-checkbox {
                position: relative;
                margin: 10px;
                width: 140px;height: 100px;
                .el-checkbox__input {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
                .el-checkbox__label {
                    padding-left: 0;
                    margin: 10px;
                }
            }
            .imgBox {

                img {
                    position: absolute;
                    width: 100%;height: 100%;
                    top: 0;left: 0;
                }
                div {
                    text-align: center;
                    /*position: absolute;*/
                    /*bottom: 0;left: 0;*/
                    /*width: 100%;*/
                }
            }
        }
        .bottom {
            text-align: right;
        }
    }
</style>